<template>
    <div class="reset-pwd">
        <el-form label-width="100px" ref="formRef" :model="form">
            <el-form-item label="手机号" :required="true" prop="phone">
                <el-input placeholder="请输入手机号" v-model="form.phone" />
            </el-form-item>
            <el-form-item label="短信验证码" :required="true" prop="code">
                <PhoneMessage v-model="form.code" :phone="form.phone" />
            </el-form-item>
            <el-form-item label="新密码" :required="true" prop="password" :rules="{ validator: checkPassword }">
                <el-input placeholder="请输入新密码" v-model="form.password" type="password" />
            </el-form-item>
            <el-form-item label="重复新密码" :required="true" prop="rePassword" :rules="{ validator: checkPassword }">
                <el-input placeholder="请重复僌新密码" v-model="form.rePassword" type="password" />
            </el-form-item>
        </el-form>

        <div class="buttons text-center lh-3">
            <el-link type="primary" class="mr-4" @click="close">返回</el-link>
            <el-button type="primary" @click="reset">重置</el-button>
        </div>
    </div>
</template>
<script setup>
import * as _ from "lodash";
import PhoneMessage from "../../../components/form/phone-message-input.vue";

const emits = defineEmits(["close"]);
const form = ref({});
const formRef = ref();

function close() {
    emits("close");
}

function reset() {
    formRef.value.validate((res) => {
        if (!res) {
            return;
        }

        app.https.get("/sys/user/reset-by-phone", form.value).then(() => {
            app.success("操作成功，请重新登录");
            emits("close");
        });
    });
}

function checkPassword(rule, val, callback) {
    if (!val) {
        return callback(new Error("密码不能为空"));
    } else if (form.value.password != form.value.rePassword) {
        return callback(new Error("两次输入密码不一致"));
    }
}
</script>

<style lang="scss" scoped>
.form {
    .img {
        height: 34px;
    }
}
</style>
